import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  Input,
  Upload,
  Space,
  Select,
  message,
} from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { Link, useNavigate, useSearchParams } from "react-router-dom";
import "./index.scss";
import QuillEditor from "../../components/QuillEditor";
import {
  addArticlesApi,
  getArticlesDetailApi,
  editArticlesDetailApi,
} from "../../apis";
import { useState, useRef, useEffect } from "react";
import { useChannel } from "../../hooks/useChannel";

const { Option } = Select;

const Publish = () => {
  const editorRef = useRef(null);
  const navigate = useNavigate();

  const [searchParams] = useSearchParams();
  const articleId = searchParams.get("id");

  const addArticles = async (params) => {
    const res = await addArticlesApi(params);
    if (res?.message === "OK") {
      message.success("发布成功!");
    } else {
      message.error("发布失败!");
    }
  };
  const editArticlesDetail = async (id, params) => {
    const res = await editArticlesDetailApi(id, params);
    if (res?.message === "OK") {
      message.success("编辑成功!");
      navigate("/article");
    } else {
      message.error("编辑失败!");
    }
  };
  // 提交表单
  const onFinish = async (formValue) => {
    if (imageList.length !== imageType) {
      return message.warning("封面图片数量不正确!");
    }
    const { title, content, channel_id, type } = formValue;
    const params = {
      title,
      content,
      cover: {
        type,
        images: imageList.map((item) => {
          if (item.response) {
            return item?.response?.data?.url;
          } else {
            return item.url;
          }
        }),
      },
      channel_id,
    };

    if (articleId) {
      editArticlesDetail(articleId, params);
    } else {
      addArticles(params);
    }
  };

  // 上传回调
  const [imageList, setImageList] = useState([]);
  const onChangeImage = (value) => {
    setImageList(value.fileList);
  };

  // 切换封面类型
  const [imageType, setImageType] = useState(0);
  const onTypeChange = (e) => {
    setImageType(e.target.value);
  };

  // 获取实例
  const [form] = Form.useForm();
  const getArticleDetail = async () => {
    const res = await getArticlesDetailApi(articleId);
    form.setFieldsValue({
      ...res?.data,
      type: res?.data?.cover?.type,
    });
    // 强制更新quill内容
    editorRef.current?.setContent(res?.data?.content);
    setImageType(res?.data?.cover?.type);
    setImageList(
      res?.data?.cover?.images?.map((url) => {
        return { url };
      })
    );
  };

  useEffect(() => {
    if (articleId) {
      getArticleDetail();
    }
  }, [articleId, form]);

  const { channelList } = useChannel();

  return (
    <div className="publish">
      <Card
        title={
          <Breadcrumb
            items={[
              { title: <Link to={"/"}>首页</Link> },
              { title: `${articleId ? "编辑" : "发布"}文章` },
            ]}
          />
        }
      >
        <Form
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ type: 0 }}
          onFinish={onFinish}
          form={form}
        >
          <Form.Item
            label="标题"
            name="title"
            rules={[{ required: true, message: "请输入文章标题" }]}
          >
            <Input placeholder="请输入文章标题" style={{ width: 400 }} />
          </Form.Item>
          <Form.Item
            label="频道"
            name="channel_id"
            rules={[{ required: true, message: "请选择文章频道" }]}
          >
            <Select placeholder="请选择文章频道" style={{ width: 400 }}>
              {channelList.map((item) => (
                <Option key={item.id} value={item.id}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label="封面">
            <Form.Item name="type">
              <Radio.Group onChange={onTypeChange}>
                <Radio value={1}>单图</Radio>
                <Radio value={3}>三图</Radio>
                <Radio value={0}>无图</Radio>
              </Radio.Group>
            </Form.Item>
            <Upload
              disabled={imageType === 0}
              listType="picture-card"
              showUploadList
              action={"http://geek.itheima.net/v1_0/upload"}
              name="image"
              onChange={onChangeImage}
              maxCount={imageType}
              fileList={imageList}
            >
              <div style={{ marginTop: 8 }}>
                <PlusOutlined />
              </div>
            </Upload>
          </Form.Item>
          <Form.Item
            label="内容"
            name="content"
            rules={[{ required: true, message: "请输入文章内容" }]}
          >
            {/* 富文本编辑器 */}
            <div>
              <QuillEditor
                ref={editorRef}
                style={{ height: "400px", marginBottom: "20px" }}
                value={form.getFieldValue("content")}
                onChange={(content) => {
                  form.setFieldsValue({ content });
                }}
              />
            </div>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 4 }}>
            <Space>
              <Button size="large" type="primary" htmlType="submit">
                发布文章
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default Publish;
